<template>
  <div class="header">
    <div class="header-info">
      <div class="logo">
        <span class="logo-info"><img src="../../assets/logo.png" /></span>
        <span class="login-text">用户管理平台</span>
      </div>
      <div class="user-info">
        <el-dropdown trigger="hover" @command="handleCommand">
                <span class="el-dropdown-link">
                    欢迎，{{ username }}<i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="loginout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    computed: {
      username () {
        let username = localStorage.getItem('loginName')
        if (username) {
          return username
        }
      }
    },
    methods: {
      handleCommand (command) {
        if (command === 'loginout') {
          localStorage.removeItem('loginName')
          localStorage.removeItem('userRouterData')
          localStorage.removeItem('userAccountId')
          this.$router.push('/login')
          window.location.reload()
        }
      }
    }
  }
</script>
